<!doctype html>
[#escape x as (x)!?html]
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>${channel.title} - ${site.title}</title>
  <meta name="keywords" content="${channel.seoKeywords}">
  <meta name="description" content="${channel.seoDescription}">
  <meta name="_csrf" content="${_csrf.token}"/>
  <meta name="_csrf_header" content="${_csrf.headerName}"/>
  [#include 'inc_meta.html'/]
  [#include 'inc_css.html'/]
  [#include 'inc_js.html'/]
  [#if config.greyStyle]
    <style>
      body {
        filter: grayscale(.95);
        -webkit-filter: grayscale(.95);
      }
    </style>
  [/#if]
</head>
<body>
[#include 'inc_header.html'/]

[#-- 设置安全的用户对象默认值]
[#assign currentUser = user!{} /]

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <!-- 个人资料维护 -->
      <div class="custom-card">
        <div class="custom-card-header">
          <h5 class="mb-0"><i class="fas fa-user-edit"></i> 个人资料维护</h5>
        </div>
        <div class="custom-card-body">
          <form id="profileForm" class="custom-form">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="name">姓名</label>
                  <input type="text" class="form-control" id="name" value="${user.name!'张三'}" readonly>
                  <small class="form-text text-muted">姓名需证件验证后修改</small>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="studentId">学号/工号</label>
                  <input type="text" class="form-control" id="studentId" value="${user.studentId!'2021001234'}" readonly>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="college">学院</label>
                  <select class="form-control" id="college">
                    <option value="计算机学院">计算机学院</option>
                    <option value="电子信息学院">电子信息学院</option>
                    <option value="机械工程学院">机械工程学院</option>
                    <option value="外国语学院">外国语学院</option>
                  </select>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="major">专业</label>
                  <input type="text" class="form-control" id="major" value="${user.major!'软件工程'}">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="phone">联系电话 <span class="text-danger">*</span></label>
                  <div class="input-group">
                    <input type="tel" class="form-control" id="phone" value="${user.phone!'13812345678'}" maxlength="11">
                    <div class="input-group-append">
                      <button type="button" class="btn btn-outline-secondary" onclick="sendPhoneCode()">发送验证码</button>
                    </div>
                  </div>
                  <small class="form-text text-muted">修改手机号需要短信验证</small>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="email">电子邮箱 <span class="text-danger">*</span></label>
                  <div class="input-group">
                    <input type="email" class="form-control" id="email" value="${user.email!'zhangsan@edu.cn'}">
                    <div class="input-group-append">
                      <button type="button" class="btn btn-outline-secondary" onclick="sendEmailCode()">发送验证码</button>
                    </div>
                  </div>
                  <small class="form-text text-muted">修改邮箱需要邮箱验证</small>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="grade">年级</label>
                  <select class="form-control" id="grade">
                    <option value="2021级">2021级</option>
                    <option value="2020级">2020级</option>
                    <option value="2019级">2019级</option>
                  </select>
                </div>
              </div>
              <div class="col-md-12">
                <div class="form-group">
                  <label for="emergencyContact">紧急联系人</label>
                  <input type="text" class="form-control" id="emergencyContact" placeholder="请输入紧急联系人姓名和电话">
                </div>
              </div>
              <div class="col-md-12">
                <div class="form-group">
                  <label for="address">通讯地址</label>
                  <textarea class="form-control" id="address" rows="2" placeholder="请输入通讯地址">${user.address!''}</textarea>
                </div>
              </div>
            </div>
            <div class="text-center mt-3">
              <button type="button" class="btn btn-primary-custom btn-custom animate-pulse" onclick="saveProfile()">
                <i class="fas fa-save"></i> 保存资料
              </button>
              <button type="button" class="btn btn-secondary-custom btn-custom ml-2" onclick="resetForm()">
                <i class="fas fa-undo"></i> 重置
              </button>
            </div>
          </form>
        </div>
      </div>

      <!-- 账户安全设置 -->
      <div class="custom-card animate-fade-in-up">
        <div class="custom-card-header">
          <h5 class="mb-0"><i class="fas fa-shield-alt"></i> 账户安全设置</h5>
        </div>
        <div class="custom-card-body">
          <div class="row">
            <div class="col-md-6 mb-3">
              <div class="custom-card h-100 animate-slide-in-left" style="animation-delay: 0.1s;">
                <div class="custom-card-body text-center">
                  <div class="mb-3">
                    <i class="fas fa-key fa-3x text-primary"></i>
                  </div>
                  <h6>密码管理</h6>
                  <p class="text-muted small">定期更换密码，保护账户安全</p>
                  <button type="button" class="btn btn-primary-custom btn-custom" onclick="showPasswordModal()">
                    <i class="fas fa-edit"></i> 修改密码
                  </button>
                </div>
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <div class="custom-card h-100 animate-slide-in-left" style="animation-delay: 0.2s;">
                <div class="custom-card-body text-center">
                  <div class="mb-3">
                    <i class="fas fa-mobile-alt fa-3x text-success"></i>
                  </div>
                  <h6>手机号管理</h6>
                  <p class="text-muted small">当前绑定：${user.phoneMasked!'138****5678'}</p>
                  <button type="button" class="btn btn-success-custom btn-custom" onclick="showPhoneModal()">
                    <i class="fas fa-sync"></i> 更换手机号
                  </button>
                </div>
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <div class="custom-card h-100 animate-slide-in-left" style="animation-delay: 0.3s;">
                <div class="custom-card-body text-center">
                  <div class="mb-3">
                    <i class="fas fa-envelope fa-3x text-info"></i>
                  </div>
                  <h6>邮箱管理</h6>
                  <p class="text-muted small">当前绑定：${user.emailMasked!'zhang***@edu.cn'}</p>
                  <button type="button" class="btn btn-info-custom btn-custom" onclick="showEmailModal()">
                    <i class="fas fa-sync"></i> 更换邮箱
                  </button>
                </div>
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <div class="custom-card h-100 animate-slide-in-left" style="animation-delay: 0.4s;">
                <div class="custom-card-body text-center">
                  <div class="mb-3">
                    <i class="fas fa-user-shield fa-3x text-warning"></i>
                  </div>
                  <h6>双因素认证</h6>
                  <p class="text-muted small">状态：[#if currentUser.twoFactorEnabled??]已启用[#else]未启用[/#if]</p>
                  <button type="button" class="btn btn-warning-custom btn-custom" onclick="showTwoFactorModal()">
                    <i class="fas fa-shield-alt"></i> [#if currentUser.twoFactorEnabled??]管理[#else]启用[/#if]双因素认证
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 读者状态查询 -->
      <div class="custom-card animate-fade-in-up">
        <div class="custom-card-header">
          <h5 class="mb-0"><i class="fas fa-id-card"></i> 读者状态查询</h5>
        </div>
        <div class="custom-card-body">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label>读者证状态</label>
                <div class="form-control-plaintext">
                  <span class="badge-custom badge-[#if currentUser.readerStatus?? && currentUser.readerStatus == 'NORMAL']success-custom[#else]danger-custom[/#if]">
                    ${currentUser.readerStatusText!'正常'}
                  </span>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>读者类型</label>
                <div class="form-control-plaintext">
                  ${user.readerType!'本科生'}
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>注册时间</label>
                <div class="form-control-plaintext">
                  ${user.registerTime!'2021-09-01'}
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>有效期限</label>
                <div class="form-control-plaintext">
                  ${user.expireDate!'2025-06-30'}
                </div>
              </div>
            </div>
          </div>

          <h6 class="mt-4 mb-3 text-gradient">借阅权限</h6>
          <div class="row">
            <div class="col-md-3 mb-3">
              <div class="stat-card animate-slide-in-left" style="animation-delay: 0.1s;">
                <div class="text-center">
                  <div class="stat-number text-primary">${user.maxBorrowCount!'10'}</div>
                  <div class="stat-label">可借图书册数</div>
                </div>
              </div>
            </div>
            <div class="col-md-3 mb-3">
              <div class="stat-card animate-slide-in-left" style="animation-delay: 0.2s;">
                <div class="text-center">
                  <div class="stat-number text-success">${user.maxBorrowDays!'30'}</div>
                  <div class="stat-label">最大借阅期限(天)</div>
                </div>
              </div>
            </div>
            <div class="col-md-3 mb-3">
              <div class="stat-card animate-slide-in-left" style="animation-delay: 0.3s;">
                <div class="text-center">
                  <div class="stat-number text-info">${user.maxRenewCount!'2'}</div>
                  <div class="stat-label">续借次数限制</div>
                </div>
              </div>
            </div>
            <div class="col-md-3 mb-3">
              <div class="stat-card animate-slide-in-left" style="animation-delay: 0.4s;">
                <div class="text-center">
                  <div class="stat-number text-warning">${user.maxReserveCount!'5'}</div>
                  <div class="stat-label">预约数量限制</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    <!-- 隐私设置 -->
      <div class="custom-card animate-fade-in-up">
        <div class="custom-card-header">
          <h5 class="mb-0"><i class="fas fa-user-lock"></i> 隐私设置</h5>
        </div>
        <div class="custom-card-body">
          <div class="row">
            <div class="col-md-12">
              <div class="custom-form">
                <div class="form-group">
                  <label>姓名显示方式</label>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="nameDisplay" id="fullName" value="full" checked>
                    <label class="form-check-label" for="fullName">全名显示</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="nameDisplay" id="partialName" value="partial">
                    <label class="form-check-label" for="partialName">部分隐藏</label>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="custom-form">
                <div class="form-group">
                  <label>借阅记录隐私</label>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="borrowHistoryPrivate">
                    <label class="form-check-label" for="borrowHistoryPrivate">隐藏借阅历史记录</label>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="custom-form">
                <div class="form-group">
                  <label>通知设置</label>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="notifySystem" checked>
                        <label class="form-check-label" for="notifySystem">系统内消息</label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="notifyEmail" checked>
                        <label class="form-check-label" for="notifyEmail">邮件通知</label>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="notifySms">
                        <label class="form-check-label" for="notifySms">短信通知</label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="notifyWechat">
                        <label class="form-check-label" for="notifyWechat">微信通知</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="text-center mt-4">
              <button type="button" class="btn btn-primary-custom btn-custom animate-pulse" onclick="savePrivacySettings()">
                <i class="fas fa-save"></i> 保存隐私设置
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧边栏 -->
    <div class="col-lg-4 d-none d-lg-block animate-slide-in-left">
      <!-- 登录历史 -->
      <div class="custom-card animate-fade-in-up">
        <div class="custom-card-header">
          <h5 class="mb-0"><i class="fas fa-history"></i> 登录历史</h5>
        </div>
        <div class="custom-card-body">
          <div class="list-group list-group-flush">
            <div class="list-group-item border-0 px-0">
              <div class="d-flex justify-content-between align-items-center">
                <div>
                  <span class="badge-custom badge-success-custom">当前登录</span>
                  <div class="small text-muted mt-1">Chrome - Windows</div>
                </div>
                <small class="text-muted">刚刚</small>
              </div>
            </div>
            <div class="list-group-item border-0 px-0">
              <div class="d-flex justify-content-between align-items-center">
                <div>
                  <span class="badge-custom badge-info-custom">上次登录</span>
                  <div class="small text-muted mt-1">Safari - iPhone</div>
                </div>
                <small class="text-muted">2小时前</small>
              </div>
            </div>
            <div class="list-group-item border-0 px-0">
              <div class="d-flex justify-content-between align-items-center">
                <div>
                  <span class="badge-custom badge-warning-custom">异地登录</span>
                  <div class="small text-danger mt-1">Firefox - 北京</div>
                </div>
                <small class="text-danger">昨天</small>
              </div>
            </div>
          </div>
          <div class="text-center mt-3">
            <button type="button" class="btn btn-primary-custom btn-custom" onclick="showMoreLoginHistory()">
              <i class="fas fa-history"></i> 查看更多
            </button>
          </div>
        </div>
      </div>

      <!-- 安全提醒 -->
      <div class="custom-card animate-fade-in-up">
        <div class="custom-card-header">
          <h5 class="mb-0"><i class="fas fa-bell"></i> 安全提醒</h5>
        </div>
        <div class="custom-card-body">
          <div class="alert alert-warning border-gradient animate-pulse" role="alert">
            <i class="fas fa-exclamation-triangle"></i>
            <strong>安全提示：</strong>您的账户检测到异地登录，如非本人操作请及时修改密码
          </div>
          <div class="custom-form">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="loginReminder" checked>
              <label class="form-check-label" for="loginReminder">开启异地登录提醒</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="deviceReminder" checked>
              <label class="form-check-label" for="deviceReminder">开启新设备登录通知</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 密码修改模态框 -->
<div class="modal fade modal-custom" id="passwordModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="fas fa-key mr-2"></i>修改密码
        </h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="passwordForm" class="custom-form">
          <div class="form-group">
            <label for="oldPassword">原密码 <span class="text-danger">*</span></label>
            <input type="password" class="form-control" id="oldPassword" required>
          </div>
          <div class="form-group">
            <label for="newPassword">新密码 <span class="text-danger">*</span></label>
            <input type="password" class="form-control" id="newPassword" required>
            <small class="form-text text-muted">密码长度8-20位，包含大小写字母、数字和特殊字符</small>
          </div>
          <div class="form-group">
            <label for="confirmPassword">确认新密码 <span class="text-danger">*</span></label>
            <input type="password" class="form-control" id="confirmPassword" required>
          </div>
          <div id="passwordStrength"></div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary-custom btn-custom" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary-custom btn-custom" onclick="changePassword()">
          <i class="fas fa-check"></i> 确认修改
        </button>
      </div>
    </div>
  </div>
</div>

[#include 'inc_footer.html'/]
<script>
// 模拟的静态数据
const userData = {
  name: '张三',
  studentId: '2021001234',
  phone: '13812345678',
  email: 'zhangsan@edu.cn',
  college: '计算机学院',
  major: '软件工程',
  grade: '2021级',
  readerStatus: 'NORMAL',
  readerStatusText: '正常',
  readerType: '本科生',
  registerTime: '2021-09-01',
  expireDate: '2025-06-30',
  maxBorrowCount: 10,
  maxBorrowDays: 30,
  maxRenewCount: 2,
  maxReserveCount: 5,
  twoFactorEnabled: false
};

// 保存个人资料
function saveProfile() {
  const form = document.getElementById('profileForm');
  const formData = new FormData(form);

  // 表单验证
  const phone = formData.get('phone');
  const email = formData.get('email');

  if (!validatePhone(phone)) {
    alert('请输入正确的手机号码');
    return;
  }

  if (!validateEmail(email)) {
    alert('请输入正确的邮箱地址');
    return;
  }

  // 模拟保存成功
  alert('个人资料保存成功！');
}

// 发送手机验证码
function sendPhoneCode() {
  const phone = document.getElementById('phone').value;
  if (!validatePhone(phone)) {
    alert('请输入正确的手机号码');
    return;
  }

  // 模拟发送验证码
  alert('验证码已发送至您的手机，请注意查收');
}

// 发送邮箱验证码
function sendEmailCode() {
  const email = document.getElementById('email').value;
  if (!validateEmail(email)) {
    alert('请输入正确的邮箱地址');
    return;
  }

  // 模拟发送验证码
  alert('验证码已发送至您的邮箱，请注意查收');
}

// 显示密码修改模态框
function showPasswordModal() {
  $('#passwordModal').modal('show');
}

// 修改密码
function changePassword() {
  const oldPassword = document.getElementById('oldPassword').value;
  const newPassword = document.getElementById('newPassword').value;
  const confirmPassword = document.getElementById('confirmPassword').value;

  if (!oldPassword || !newPassword || !confirmPassword) {
    alert('请填写完整的密码信息');
    return;
  }

  if (newPassword !== confirmPassword) {
    alert('两次输入的新密码不一致');
    return;
  }

  if (!validatePassword(newPassword)) {
    alert('密码格式不符合要求，请重新设置');
    return;
  }

  // 模拟密码修改成功
  alert('密码修改成功！请重新登录');
  $('#passwordModal').modal('hide');
}

// 显示手机号管理模态框
function showPhoneModal() {
  alert('手机号管理功能：更换绑定手机号、解绑等操作');
}

// 显示邮箱管理模态框
function showEmailModal() {
  alert('邮箱管理功能：更换绑定邮箱、验证等操作');
}

// 显示双因素认证模态框
function showTwoFactorModal() {
  alert('双因素认证功能：短信验证码、邮箱验证码、身份验证器APP等');
}

// 保存隐私设置
function savePrivacySettings() {
  alert('隐私设置保存成功！');
}

// 显示更多登录历史
function showMoreLoginHistory() {
  alert('显示完整的登录历史记录');
}

// 重置表单
function resetForm() {
  document.getElementById('profileForm').reset();
}

// 表单验证函数
function validatePhone(phone) {
  const phoneRegex = /^1[3-9]\d{9}$/;
  return phoneRegex.test(phone);
}

function validateEmail(email) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

function validatePassword(password) {
  // 密码长度8-20位，包含大小写字母、数字和特殊字符
  // 使用字符编码避免FreeMarker解析冲突
  var specialChars = String.fromCharCode(64,36,33,37,42,63,38); // @$!%*?&
  var pattern1 = '^(?=.*[a-z])(?=.*[A-Z])(?=.*';
  var pattern2 = '\\d';
  var pattern3 = ')(?=.*[' + specialChars + '])[A-Za-z';
  var pattern4 = '\\d';
  var pattern5 = specialChars + ']{8,20}$';
  const passwordRegex = new RegExp(pattern1 + pattern2 + pattern3 + pattern4 + pattern5);
  return passwordRegex.test(password);
}

// 密码强度检测
document.getElementById('newPassword').addEventListener('input', function() {
  const password = this.value;
  let strength = 0;
  let strengthText = '';
  let strengthClass = '';

  if (password.length >= 8) strength++;
  if (password.match(/[a-z]/)) strength++;
  if (password.match(/[A-Z]/)) strength++;
  if (password.match(/[0-9]/)) strength++;
  if (password.match(/[^a-zA-Z0-9]/)) strength++;

  if (strength <= 2) {
    strengthText = '弱';
    strengthClass = 'text-danger';
  } else if (strength <= 3) {
    strengthText = '中等';
    strengthClass = 'text-warning';
  } else {
    strengthText = '强';
    strengthClass = 'text-success';
  }

  const strengthDiv = document.getElementById('passwordStrength');
  strengthDiv.innerHTML = `<span class="${strengthClass}">密码强度：${strengthText}</span>`;
});

// 页面初始化
document.addEventListener('DOMContentLoaded', function() {
  // 可以在这里添加页面初始化逻辑
});
// API调用统计
axios.get('${api}/channel/view/${channel.id?c}');
</script></body>
</html>
[/#escape]
